@for (row of dataProvider().currentPage$ | async; track trackRowByIdentity(row)) {
  <tr
    class="row"
    tabindex="0"
    [ixTest]="getRowTag(row)"
    [ixUiSearch]="{ anchor: getRowTag(row) }"
    [ngStyle]="{ cursor: detailsTemplate ? 'pointer' : null }"
    [class.expanded]="isExpanded(row)"
    [class.hidden]="isLoading()"
    (click)="onToggle(row)"
    (keydown.enter)="onToggle(row)"
  >

    @for (column of displayedColumns; track trackColumnByIdentity(column); let idx = $index) {
      <td [ngClass]="column.cssClass || ''">
        @if (getTemplateByColumnIndex(idx); as template) {
          <ng-container
            *ngTemplateOutlet="template; context: { $implicit: row }"
          ></ng-container>
        } @else {
          <ng-template
            ix-body-cell
            [row]="row"
            [column]="column"
          ></ng-template>
        }
      </td>
    }
    @if (detailsTemplate) {
      <td class="toggle-cell">
        <button
          mat-icon-button
          ixTest="toggle-row"
          [matTooltip]="isExpanded(row) ? ('Collapse Row' | translate) : ('Expand Row' | translate)"
          (click)="$event.stopPropagation(); onToggle(row)"
        >
          @if (isExpanded(row)) {
            <ix-icon name="mdi-chevron-up"></ix-icon>
          } @else {
            <ix-icon name="mdi-chevron-down"></ix-icon>
          }
        </button>
      </td>
    }
  </tr>

  @if (detailsTemplate && isExpanded(row)) {
    <tr
      ixTest="details"
      class="details"
      [class.hidden]="isLoading()"
    >
      <td [attr.colspan]="displayedColumns.length + 1">
        <ng-container *ngTemplateOutlet="detailsTemplate; context: { $implicit: row }"></ng-container>
      </td>
    </tr>
  }
}

@if (isLoading()) {
  <td [attr.colspan]="displayedColumns.length">
    <div class="spinner-container">
      <mat-spinner [diameter]="40"></mat-spinner>
    </div>
  </td>
}
